<template>
    <div class="page">
        <a-card title="个人所得税计算器">
            <a-row :gutter="16">
                <a-col :span="6">
                    <div class="btn-row">
                        <a-space>
                            <a-button type="primary" @click="openSetAll">批量设置</a-button>
                            <a-button type="primary" @click="clearStorage">清空缓存</a-button>
                            <a-button type="primary" @click="exportToExcel">导出</a-button>
                        </a-space>
                    </div>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" size="small">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key === 'income'">
                                <a-input-number :min="0" v-model:value="record.income" :placeholder="'请输入' + record.month + '收入'" @change="dealMoney"/>
                            </template>
                            <template v-if="column.key === 'starting'">
                                <a-input-number :min="0" v-model:value="record.starting" :placeholder="'请输入' + record.month + '月起征线'"  @change="dealMoney"/>
                            </template>
                            <template v-if="column.key === 'deduction'">
                                <a-input-number :min="0" v-model:value="record.deduction" :placeholder="'请输入' + record.month + '专项扣除'"  @change="dealMoney"/>
                            </template>
                            <template v-if="column.key === 'additional'">
                                <a-input-number :min="0" v-model:value="record.additional" :placeholder="'请输入' + record.month + '附加扣除'"  @change="dealMoney"/>
                            </template>
                            <template v-if="column.key === 'taxMoney'">
                                <a-popover title="计算公式">
                                    <template #content>
                                        <p v-for="e in record.taxList">{{e}}</p>
                                    </template>
                                    <a-button type="link">{{record.taxMoney}}</a-button>
                                </a-popover>
                            </template>
                        </template>
                    </a-table>
                </a-col>
            </a-row>
        </a-card>
        <div>
            <a-modal v-model:visible="showSetAll" title="批量设置" :footer="null" width="1000px">
                <a-form :model="formState" name="basic"  :label-col="labelCol" >
                    
                    <a-row :gutter="16">
                        <a-col :span="24">
                            <a-form-item label="设置全年" name="setAllYear" >
                                <a-switch v-model:checked="formState.setAllYear" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="24">
                            <a-form-item label="月份" name="month">
                                <a-checkbox-group :disabled="formState.setAllYear" v-if="formState.setAllYear">
                                    <a-checkbox v-for="index in 12">{{index}} 月</a-checkbox>
                                </a-checkbox-group>
                                <a-checkbox-group v-model:value="formState.month" v-else>
                                    <a-checkbox :value="index" :key="'month-' + index" v-for="index in 12">{{index}} 月</a-checkbox>
                                </a-checkbox-group>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-row :gutter="16">
                                <a-col :span="24">
                                    <a-form-item label="设置月收入" name="setIncome" >
                                        <a-switch v-model:checked="formState.setIncome" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item label="月收入" name="income" v-if="formState.setIncome">
                                        <a-input-number :min="0" v-model:value="formState.income" style="width: 100%;"/>
                                    </a-form-item>
                                    <a-form-item label="月收入" v-else>
                                        <a-input v-model:value="formState.income" disabled/>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row :gutter="16">
                                <a-col :span="24">
                                    <a-form-item label="设置月起征线" name="setStarting" >
                                        <a-switch v-model:checked="formState.setStarting" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item label="月起征线" name="starting" v-if="formState.setStarting">
                                        <a-input-number :min="0" v-model:value="formState.starting"  style="width: 100%;"/>
                                    </a-form-item>
                                    <a-form-item label="月起征线" v-else>
                                        <a-input v-model:value="formState.starting" disabled/>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-row :gutter="16">
                                <a-col :span="24">
                                    <a-form-item label="设置专项扣除" name="setDeduction" >
                                        <a-switch v-model:checked="formState.setDeduction" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item label="专项扣除" name="deduction" v-if="formState.setDeduction">
                                        <a-input-number :min="0" v-model:value="formState.deduction" style="width: 100%;"/>
                                    </a-form-item>
                                    <a-form-item label="专项扣除" v-else>
                                        <a-input v-model:value="formState.deduction" disabled/>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="12">
                            <a-row :gutter="16">
                                <a-col :span="24">
                                    <a-form-item label="设置附加扣除" name="setAdditional" >
                                        <a-switch v-model:checked="formState.setAdditional" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item label="附加扣除" name="additional" v-if="formState.setAdditional">
                                        <a-input-number :min="0" v-model:value="formState.additional"  style="width: 100%;"/>
                                    </a-form-item>
                                    <a-form-item label="附加扣除" v-else>
                                        <a-input v-model:value="formState.additional" disabled/>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    
                    <a-row :gutter="16">
                        <a-col :span="24">
                            <div class="form-btn-row">
                                <a-space>
                                    <a-button type="primary" @click="doSetting">保存</a-button>
                                    <a-button type="defalut" @click="closeSetAll">关闭</a-button>
                                </a-space>
                            </div>
                        </a-col>
                    </a-row>
                </a-form>
            </a-modal>
        </div>
    </div>
</template>
<script setup lang="ts">
import storage from 'store'
import { onMounted, ref, watch } from 'vue';
import { Modal } from 'ant-design-vue';
import * as XLSX from 'xlsx';
const  columns = ref([
	{  title: '月份', dataIndex: 'month', key: 'month',  align: "center"},
	{  title: '收入', dataIndex: 'income', key: 'income', width:160, align: "center"},
	{  title: '月起征线', dataIndex: 'starting', key: 'starting', width:160, align: "center"},
	{  title: '专项扣除', dataIndex: 'deduction', key: 'deduction', width:160, align: "center"},
	{  title: '附加扣除', dataIndex: 'additional', key: 'additional', width:160, align: "center"},
	{  title: '应纳税金额', dataIndex: 'monthMoney', key: 'monthMoney', align: "center"},
	{  title: '累积应纳税额', dataIndex: 'accumulateMonth', key: 'accumulateMonth', align: "center"},
	{  title: '当月税额', dataIndex: 'taxMoney', key: 'taxMoney', align: "center"},
	{  title: '累积纳税', dataIndex: 'accumulateTax', key: 'accumulateTax', align: "center"},
])
const tableData = ref<any[]>()
const showSetAll = ref<boolean>(false)
const labelCol =  ref({ style: { width: '100px' } })
const formState = ref<any>({
    setAllYear: true,
    month: [1,2,3,4,5,6,7,8,9,10,11,12],
    setIncome: true,
    income: 0,
    setStarting: true,
    starting: 5000,
    setDeduction: true,
    deduction: 0,
    setAdditional: true,
    additional: 0
});
watch(tableData, () => {
    let list = [...tableData.value || []]
    storage.set("loacl-data", list)
}, {deep:true})
onMounted(() => {
    let localData = storage.get("loacl-data")
    if (localData && localData.length === 12) {
        tableData.value = localData
        dealMoney()
    } else {
        initTableData()
    }
})
function openSetAll(){
    showSetAll.value = true
}
function closeSetAll(){
    showSetAll.value = false
}
function doSetting(){
    let settingData = {...formState.value || {}}
    let month:any[] = [...settingData.month || []]
    if (settingData.setAllYear) {
        month = [1,2,3,4,5,6,7,8,9,10,11,12]
    }
    let list = [...tableData.value || []]
    for(let i=0; i < month.length; i++) {
        let index = month[i]
        let item = list[index - 1]
        if (settingData.setIncome) {
            item.income = settingData.income
        }
        if (settingData.setStarting) {
            item.starting = settingData.starting
        }
        if (settingData.setDeduction) {
            item.deduction = settingData.deduction
        }
        if (settingData.setAdditional) {
            item.additional = settingData.additional
        }
        list[index - 1] = item
    }
    tableData.value = list
    dealMoney()
    closeSetAll()
}
function initTableData(){
    let list:any[] = []
    for (let i = 1; i < 13; i++) {
        list.push({
            month: i + "月",
            income: 0,
            starting: 5000,
            deduction: 0,
            additional: 0,
            monthMoney: 0,
            accumulateMonth: 0,
            taxMoney: 0,
            accumulateTax: 0,
            taxList: []
        })
    }
    tableData.value = list
    dealMoney()
}
function dealMoney(){
    let list = [...tableData.value || []]
    let accumulateMonth = 0
    let accumulateTax = 0
    list.forEach(e=>{
        let starting = e.starting || 0
        let deduction = e.deduction || 0
        let additional = e.additional || 0
        let monthMoney = e.income - starting - deduction - additional
        if (monthMoney < 0) {
            monthMoney = 0
        }
        e.monthMoney = monthMoney
		let pie = 0
        let taxMoney = 0
        let taxList = []
        let money = monthMoney
        let temporaryMoney = monthMoney
        if (accumulateMonth < 36000 && accumulateMonth >=0) {
            pie = 0.03
            if (accumulateMonth + money < 36000) {
                temporaryMoney = money
			    money = 0
                accumulateMonth = accumulateMonth + temporaryMoney
            } else {
                temporaryMoney = 36000 - accumulateMonth
                money = accumulateMonth + money - 36000
                accumulateMonth = 36000
            }
            let tax = temporaryMoney * pie
            taxList.push(temporaryMoney + ' * ' + pie + ' = ' +tax.toFixed(2))
            taxMoney += tax
        }
        if (accumulateMonth < 144000 && accumulateMonth >= 36000) {
            pie = 0.1
            if (accumulateMonth + money < 144000) {
                temporaryMoney = money
                money = 0
                accumulateMonth = accumulateMonth + temporaryMoney
            } else {
                temporaryMoney = 144000 - accumulateMonth
                money = accumulateMonth + money - 144000
                accumulateMonth = 144000
            }
            let tax = temporaryMoney * pie
            taxList.push(temporaryMoney + ' * ' + pie + ' = ' +tax.toFixed(2))
            taxMoney += tax
        }
        if (accumulateMonth < 300000 && accumulateMonth >= 144000) {
            pie = 0.2
            if (accumulateMonth + money < 300000) {
                temporaryMoney = money
                money = 0
                accumulateMonth = accumulateMonth + temporaryMoney
            } else {
                temporaryMoney = 300000 - accumulateMonth
                money = accumulateMonth + money - 300000
                accumulateMonth = 300000
            }
            let tax = temporaryMoney * pie
            taxList.push(temporaryMoney + ' * ' + pie + ' = ' +tax.toFixed(2))
            taxMoney += tax
        }
        if (accumulateMonth < 420000 && accumulateMonth >= 300000) {
            pie = 0.25
            if (accumulateMonth + money < 420000) {
                temporaryMoney = money
                money = 0
                accumulateMonth = accumulateMonth + temporaryMoney
            } else {
                temporaryMoney = 420000 - accumulateMonth
                money = accumulateMonth + money - 420000
                accumulateMonth = 420000
            }
            let tax = temporaryMoney * pie
            taxList.push(temporaryMoney + ' * ' + pie + ' = ' +tax.toFixed(2))
            taxMoney += tax
        }
        if (accumulateMonth < 660000 && accumulateMonth >= 420000) {
            pie = 0.30
            if (accumulateMonth + money < 660000) {
                temporaryMoney = money
                money = 0
                accumulateMonth = accumulateMonth + temporaryMoney
            } else {
                temporaryMoney = 660000 - accumulateMonth
                money = accumulateMonth + money - 660000
                accumulateMonth = 660000
            }
            let tax = temporaryMoney * pie
            taxList.push(temporaryMoney + ' * ' + pie + ' = ' +tax.toFixed(2))
            taxMoney += tax
        }
        if (accumulateMonth < 960000 && accumulateMonth >= 660000) {
            pie = 0.35
            if (accumulateMonth + money < 960000) {
                temporaryMoney = money
                money = 0
                accumulateMonth = accumulateMonth + temporaryMoney
            } else {
                temporaryMoney = 960000 - accumulateMonth
                money = accumulateMonth + money - 960000
                accumulateMonth = 960000
            }
            let tax = temporaryMoney * pie
            taxList.push(temporaryMoney + ' * ' + pie + ' = ' +tax.toFixed(2))
            taxMoney += tax
        }
        if (accumulateMonth >= 960000) {
            pie = 0.45
            let tax = money * pie
            taxList.push(money + ' * ' + pie + ' = ' + tax.toFixed(2))
            taxMoney += tax
        }
        accumulateTax += taxMoney
        e.monthMoney = e.monthMoney.toFixed(2)
        e.taxMoney = taxMoney.toFixed(2)
        e.accumulateTax = accumulateTax.toFixed(2)
        e.accumulateMonth = accumulateMonth.toFixed(2)
        e.taxList = taxList
    })
    tableData.value = list
}
function clearStorage(){
    Modal.confirm({
        title: '提示',
        content: '您确定要清空缓存数据吗？',
        okText: '确认',
        cancelText: '取消',
        onOk: () =>{
            initTableData()
        }
    })
}
function exportToExcel(){
    let list = []
    let title = ['月份','收入','月起征线','专项扣除','附加扣除','应纳税金额','累积应纳税额','当月税额','累积纳税']
    list.push(title)
    let data = [...tableData.value || []]
    data.forEach( (item:any) => {
        let row = [item.month, item.income, item.starting, item.deduction, item.additional, item.monthMoney, item.accumulateMonth, item.taxMoney, item.accumulateTax]
        list.push(row)
    })
    const worksheet = XLSX.utils.aoa_to_sheet(list);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    XLSX.writeFile(workbook, '应纳个税计算.xlsx');
}

</script>
<style lang="less" scoped>
.page{
    padding: 10px;
    .btn-row{
        margin-bottom: 20px;
    }
}

.form-btn-row{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>